<template>
  <div>
    <Echart
      :options="options"
      height="240px"
      width="470px"
    />
  </div>
</template>

<script>
import Echart from '../../../common/echart'

export default {
  components: {
    Echart
  },
  // 这里是预留给你传数据的
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      options: {}
    }
  },
  watch: {
    cdata: {
      handler() {
        this.options = {
          radar: {
            name: {
              textStyle: {
                color: '#ffffff'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: '#0263FF'
              }
            },
            splitArea: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: 'rgba(2, 99, 255, 0.2)'
              }
            },
            indicator: [
              { name: '总图', max: 1000 },
              { name: '电气', max: 1000 },
              { name: '仪表', max: 1000 },
              { name: '设备', max: 1000 },
              { name: '工艺', max: 1000 },
              { name: '消防', max: 1000 }
            ]
          },
          tooltip: {
            show: true
          },
          series: [
            {
              type: 'radar',
              data: [
                {
                  value: [500, 340, 280, 310, 420, 260],
                  name: '现场隐患分类',
                  itemStyle: {
                    normal: {
                      color: 'rgba(2, 99, 255, 0.5)',
                      borderColor: '#00D8FF',
                      borderWidth: 2
                    }
                  },
                  areaStyle: {
                    normal: {
                      color: 'rgba(2, 99, 255, 0.5)'
                    }
                  }
                }
              ]
            }
          ]
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
